<template>
  <van-overlay :show="taskDialog" @click="taskDialog = false" :zIndex="5">
    <div class="bg_fff bkra8 apply_detail" @click.stop>
      <div v-if="taskList.length == 0">
        <van-empty description="暂无任务"></van-empty>
      </div>
      <div class="wb pad_20" v-else>
        <div class="fl vstart wb" :class="index < taskList.length - 1 ? 'mb' : ''" v-for="(item, index) in taskList" :key="item.taskId">
          <div class="color_8c dx_14 w120">{{ fn_formatter__type(item.taskType) }}</div>
          <div class="fl1 fl vc w">
            <van-image
              v-for="(img, index1) in item.taskCompletedUrls"
              :key="index1"
              width="48px"
              height="48px"
              radius="5px"
              lazy-load
              class="mr10"
              fit="cover"
              :src="img"
              @click="previewImg(item.taskCompletedUrls, index1)"
            >
            </van-image>
          </div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script>
import { Overlay, Dialog, ImagePreview  } from 'vant';
import { 
  getTaskInfo
} from '@/api/bind.js'
export default {
  components: {
    [Overlay.name]: Overlay,
    [Dialog.Component.name]: Dialog.Component,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },

  props: {
  },
  data() {
    return {
      taskDialog: false,
      taskList: [],
      typeList: [
        {
          id: 1,
          name: '朋友圈任务',
          isChecked: true
        },
        {
          id: 2,
          name: '店家群任务',
          isChecked: true
        },
        {
          id: 5,
          name: '绑本助力任务',
          isChecked: true
        },
        {
          id: 4,
          name: '通用任务',
          isChecked: true
        }
      ]
    };
  },

  methods: {
    initData(userBindScriptId) {
      this.taskDialog = true
      this.taskList = []
      this.getTaskDetail(userBindScriptId)
    },

    previewImg (list, index) {
      ImagePreview({
        images: list,
        startPosition: index,
      });
    },

    // 格式化类型
    fn_formatter__type(val) {
      const item = this.typeList.find((item) => item.id == val)
      return item ? item.name : '-'
    },

    // 获取任务详情
    async getTaskDetail (userBindScriptId) {
      try {
        const params = {
          request: {
            userBindScriptId: userBindScriptId
          }
        }
        const res = await getTaskInfo(params)
        if (res.errorCode === 0) {
          console.log(res)
          if (res.response) {
            this.taskList = res.response.sort(this.compare('taskType'))

            // 修改排序 把通用任务放在最后一项
            let itemData = ''
            this.taskList.forEach((item, index) => {
              if (item.taskType == 4) {
                itemData = item
                this.taskList.splice(index, 1)
                return false
              }
            })
            if (itemData) {
              this.taskList.push(itemData)
            }
            this.taskList.forEach(item => {
              item.taskCompletedUrls = JSON.parse(item.taskCompletedUrls)
            })
          } else {
            this.taskList = []
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 排序
    compare(property) {
      return function (a, b) {
        const value1 = a[property]
        const value2 = b[property]
        return value1 - value2
      }
    }
  }
};
</script>

<style lang="less">
.apply_detail {
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.plr_12 {
  padding: 0 12px;
}
.lh_24 {
  line-height: 24px;
}
.bk_97 {
  border: 1px solid #979797;
}
.detail_wrap {
  padding: 8px 0;
  border-top: 1px dashed #E7E7E7;
}
.btn_wrap {
  padding: 12px 0;
  border-top: 1px dashed #E7E7E7;
}

</style>
